
<!-- 产品指南 -->
<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      产品及系统
    </p>
    <div class="banner-jjnwer">
      <img :src="bannerUrl" v-if="bannerUrl" class="w100 h100 dsfdrrewer" />
      <div
        class="kkkmnerrwe cf fz40 vertical-center sz"
        @click="photoShowModaler = true"
      >
        点击上传顶图
      </div>
    </div>
    <div class="mt20 fz22">
      <n-input
        class="fz22 br0"
        placeholder=""
        size="medium"
        v-model:value="introduce"
        clearable
        @blur="shujueer"
      ></n-input>
    </div>

    <div class="mt60 fz26">交流充电桩</div>
    <div class="mt30 jdfdsrreer">
      <div class="nkjhhbjwerw" v-for="(item, idx) in xwList" :key="idx">
        <img :src="item.fm" class="jjnnxeertw" />
        <p class="pd pt5 fz18">{{ item.title }}</p>
        <div class="jhnkjxerrw vertical-center">
          <div>
            <i
              class="iconfont dx-edit sz cf fz40"
              @click="bianjicp(item.id)"
            ></i>
            <i
              class="iconfont dx-shanchu sz cf fz40 ml20"
              @click="delcp(item.id, 1)"
            ></i>
          </div>
        </div>
      </div>
      <div
        class="nkjhhbjwerw vertical-center sz"
        @click="hf('EdutProductGuide')"
      >
        <span class="fz20 z9">+添加交流充电桩</span>
      </div>
    </div>
    <div class="mt60 fz26">直流充电桩</div>
    <div class="jkjjnkderr mt30">
      <div class="nkjhhbjwerw" v-for="(item, idx) in ywxwList" :key="idx">
        <img :src="item.fm" class="jjnnxeertw" />
        <p class="pd pt5 fz18">{{ item.title }}</p>
        <div class="jhnkjxerrw vertical-center">
          <div>
            <i
              class="iconfont dx-edit sz cf fz40"
              @click="bianjicp(item.id)"
            ></i>
            <i
              class="iconfont dx-shanchu sz cf fz40 ml20"
              @click="delcp(item.id, 1)"
            ></i>
          </div>
        </div>
      </div>
      <div
        class="nkjhhbjwerw vertical-center sz"
        @click="hf('EdutProductGuide')"
      >
        <span class="fz20 z9">+添加直流充电桩</span>
      </div>
    </div>

    <div class="mt60 jjhihweertrw">
      <div class="">
        <p class="fz26 tijnwerrwe">大功率液冷超充系统</p>
        <div class="jjhnjsfm">
          <img :src="case1.fm" v-if="case1.fm" />
          <div class="jjnjhwerrwe vertical-center">
            <div>
              <i
                class="iconfont dx-edit sz cf fz40"
                @click="biajicjer(case1.url)"
              ></i>
              <i
                class="iconfont dx-shuaxin cf fz40 sz ml20"
                @click="jhwer(1)"
              ></i>
            </div>
          </div>
        </div>
        <p class="pd fz20 fdsferw">{{ case1.title }}</p>
      </div>
      <div class="" @click="jhwer(2)">
        <p class="fz26 tijnwerrwe">
          ABB Ability <span class="tm-text">TM</span> 充电服务平台
        </p>
        <div class="jjhnjsfm">
          <img :src="case2.fm" v-if="case2.fm" />
          <div class="jjnjhwerrwe vertical-center">
            <i class="iconfont dx-shuaxin cf fz40 sz"></i>
          </div>
        </div>
        <p class="pd fz20 fdsferw">{{ case2.title }}</p>
      </div>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择栏目顶图</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="abb栏目顶图"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="showModal" preset="card" style="width: 1200px">
      <template #header>
        <div>
          {{ typelie == 1 ? "交流充电桩" : "直流充电桩" }}
        </div>
      </template>
      <div>
        <list :pup="'' + typelie" @callBack="listCall" ref="lisPupfun"></list>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="showModalsan" preset="card" class="Stock-diagnosis">
      <template #header>
        <p class="fz26 tijnwerrwe">
          修改
          <span v-if="jjnjsher == 1">大功率液冷超充系统</span>
          <span v-if="jjnjsher == 2"
            >ABB Ability <span class="tm-text">TM</span> 充电服务平台</span
          >
        </p>
      </template>
      <div>
        <addCase ref="caseView"></addCase>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModalsan = false"> 取消 </n-button>
          <n-button type="info" class="ml20" @click="jnnkjwerwe">
            确认
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { nextTick, ref } from "vue";
import { dxget, dialog, dxdel, dxpost, hf } from "../../../util";
import photoGallery from "../../../components/util/photoGallery";
import list from "./list.vue";
const caseView = ref();
const bannerUrl = ref();
const photoShowModaler = ref(false);
const showModal = ref(false);
const showModalsan = ref(false);
const typelie = ref(1);
const jjnjsher = ref(1);
let videUrler = "";
const xwList = ref(); // 交流充电桩
const ywxwList = ref(); // 直流充电桩
const introduce = ref("");

const case1 = ref({
  fm: "",
  title: "",
  url: "",
});
const case2 = ref({
  fm: "",
  title: "",
  url: "",
});
const getImger = (data) => {
  videUrler = data;
};
const geturler = () => {
  photoShowModaler.value = false;
  bannerUrl.value = videUrler;
  upDataHome({ banner: videUrler });
};

const getxw = async (type) => {
  const { data }: any = await dxget("abb/abbproduct", {
    dxleujne: type,
  });
  if (type == 1) {
    xwList.value = data;
  }
  if (type == 2) {
    ywxwList.value = data;
  }
};

const xiugfai = async (id, homepageRecommendation, lx) => {
  const res = await dxpost(
    "abb/abbproduct",
    { id, homepageRecommendation },
    "PUT"
  );
  getxw(lx);
};

getxw(1);
getxw(2);
const listCall = () => {
  showModal.value = false;
  getxw(1);
  getxw(2);
};
const showjee = (val) => {
  showModal.value = true;
  typelie.value = val;
};
const jhwer = async (type) => {
  jjnjsher.value = type;
  showModalsan.value = true;
  await nextTick();
  let jhnbnse = "";
  if (type == 1) {
    jhnbnse = JSON.parse(JSON.stringify(case1.value));
  }
  if (type == 2) {
    jhnbnse = JSON.parse(JSON.stringify(case2.value));
  }

  caseView.value.setForm(jhnbnse);
};
const jnnkjwerwe = async () => {
  const datae = await caseView.value.getForm();
  showModalsan.value = false;
  const obj = {};
  if (jjnjsher.value == 1) {
    obj["case1"] = JSON.stringify(datae);
  }
  if (jjnjsher.value == 2) {
    obj["case2"] = JSON.stringify(datae);
  }
  await upDataHome(obj);
  initData();
};

const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 1,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};
const shujueer = () => {
  upDataHome({ introduce: introduce.value });
};

const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 1 });
  bannerUrl.value = data.banner;
  introduce.value = data.introduce;
  case1.value = JSON.parse(data.case1);
  case2.value = JSON.parse(data.case2);
};

const delcp = async (id, ty) => {
  const tyoew = await dialog("确认删除该产品嘛？删除后无法恢复");
  if (tyoew == 1) {
    await dxdel("abb/abbproduct", { id });
    getxw(ty);
  }
};
const bianjicp = (id) => {
  hf("EdutProductGuide", { id });
};
const biajicjer = (text) => {
  const idse = text.split("?")[1];
  const id = idse.split("=")[1];
  hf("EdutProductGuide", { id });
};
initData();
</script>
 <style scoped>
.jdfdsrreer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.nkjhhbjwerw {
  height: 293px;
  background: #fafafa;
  position: relative;
}
.jjnnxeertw {
  height: 223px;
  object-fit: cover;
  width: 100%;
}
.jhnkjxerrw,
.jjnjhwerrwe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.nkjhhbjwerw:hover .jhnkjxerrw {
  display: flex;
}
.jkjjnkderr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.jjhihweertrw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.tijnwerrwe {
  height: 55px;
}
.jjhnjsfm {
  height: 223px;
  background: #f8f8f8;
  position: relative;
}
.jjhnjsfm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jjhnjsfm:hover .jjnjhwerrwe {
  display: flex;
}

.fdsferw {
  background: #fafafa;
}
.tm-text {
  display: inline-block;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  position: relative;
  top: -12px;
  font-size: 16px;
}
</style>